<template>
  <el-dialog
    :title="`${isEdit ? '编辑' : '新增'}频道`"
    :visible.sync="dialogVisible"
    width="30%"
    :close-on-click-modal="false"
    :before-close="close"
  >
    <div>
      <el-form
        ref="RefForm"
        :model="formData"
        label-width="80px"
        :rules="formRules"
        status-icon
      >
        <el-form-item label="频道名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="频道类型" prop="type">
          <el-radio-group v-model="formData.type">
            <el-radio
              v-for="item in constArr.type"
              :key="item.value"
              :label="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道排序" prop="position">
          <el-input-number
            v-model="formData.position"
            class="input-number"
            :min="1"
            :max="99"
            :precision="0"
            :controls="false"
          ></el-input-number>
          <span>填写1～99的数字，数字越大，排序越靠前</span>
        </el-form-item>
        <el-form-item label="频道状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio
              v-for="item in constArr.status"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button
        :loading="loadingSubmit"
        type="primary"
        @click="handleSubmit"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { eleValidator } from '@/utils/tools'
  export default {
    mixins: [dialogEditMixin],
    props: {
      channel: {
        type: String,
        default: ''
      }
    },
    data() {
      const _this = this
      return {
        constArr: {
          status: _this.$const['STATE/CHANNEL_LIVE'],
          type: _this.$const['CHANNEL/TYPE']
        },
        formRules: {
          name: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '标题不能为空' }
              ]),
              trigger: 'blur'
            }
          ],
          type: { required: true, message: '请选择类型', trigger: 'change' },
          position: { required: true, message: '请输入排序', trigger: 'blur' },
          status: { required: true, message: '请选择状态', trigger: 'change' }
        },
        apiKey: {
          search: 'channel/search',
          add: 'channel/add',
          put: 'channel/put'
        }
      }
    },
    watch: {
      channel(val) {
        this.formData.type = val
      }
    },
    methods: {
      resetFormData() {
        this.formData = {
          name: '',
          type: this.channel,
          position: 1,
          status: 60
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .input-number {
    width: 100%;

    /deep/ {
      .el-input__inner {
        text-align: left;
      }
    }
  }
</style>
